<div id="content_header">
  <h3>Courses</h3>
</div>

<!-- SUBJECTS PANEL -->
<pageslide ps-size="600px" ps-speed="0.25" ps-auto-close="true" ps-open="psForm">
  <div style="padding:20px">
    <h3>Subjects <a href="" ng-click="psForm = !psForm"><i class="simple-icon-close"></i></a></h3>
    <hr>
    <a href ng-click="CreateNewSubject(currentCourse.Id)">Add New Subject</a>
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <table class="table table-striped table-hover table-condensed">
          <thead>
            <tr>
              <th>Code</th>
              <th>Name</th>
              <th>Type</th>
              <th>Score</th>
              <th>Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="subject in subjects">
              <td><a href ng-click="editSubject(subject)">{{ subject.Code }}</a></td>
              <td>{{ subject.Name }}</td>
              <td>{{ ScoreTypes[subject.ScoreType].Label }}</td>
              <td ng-show="subject.ScoreType===0">{{ subject.RangeScore.LowerBound }} - {{ subject.RangeScore.Upperbound }}</td>
              <td ng-show="subject.ScoreType===1">
                <span class="badge" ng-repeat="score in subject.LookupScores">{{ score.Name }}</span>
              </td>
              <td>
                {{ (subject.IsActive)?'Active':'Idle' }}
              </td>
              <td><a class="" href ng-really-message="Are you sure?" ng-really-click="delete('subjects', subject.Id, {collection: subjects, index: $index})"><i class="simple-icon-trash"></i></a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</pageslide>

<!-- NEW SUBJECT PANEL -->
<pageslide ps-size="550px" ps-speed="0.25" ps-auto-close="true" ps-open="psSubjectNew">
  <div style="padding:20px">
    <h3>New Subject <a href="" ng-click="psSubjectNew = !psSubjectNew"><i class="simple-icon-close"></i></a></h3>
    <hr>
    <div class="row ps-content">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <form class="form-horizontal" role="form" ng-submit="saveSubject()" >

          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
              <div class="form-group" ng-class="{ 'has-error': errors.IsActive}" style="margin-left:0px;margin-right:0px;">
                <label for="IsActive">
                  <input type="checkbox" name="IsActive" id="IsActive" ng-model="subject.IsActive">
                  Active
                </label>
                <error-widget field="errors.IsActive"></error-widget>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
              <div class="form-group" ng-class="{ 'has-error': errors.Name}" style="margin-left:0px;margin-right:0px;">
                <label class="required" for="Name">Name</label>
                <input type="text" name="Name" id="Name" class="form-control" ng-model="subject.Name">
                <error-widget field="errors.Name"></error-widget>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
              <div class="form-group" ng-class="{ 'has-error': errors.Code}" style="margin-left:0px;margin-right:0px;">
                <label class="required" for="Code">Code</label>
                <input type="text" name="Code" id="Code" class="form-control" ng-model="subject.Code" />
                <error-widget field="errors.Code"></error-widget>
              </div>
            </div>
          </div>


          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
              <div class="form-group" ng-class="{ 'has-error': errors.ScoreType}" style="margin-left:0px;margin-right:0px;">
                <label class="required" for="ScoreType">Score Type</label>
                <select class="form-control" ng-options="score.Id as score.Label for score in ScoreTypes" ng-model="subject.ScoreType">
                  <option value="" ng-hide="subject.ScoreType>-1">Choose a score type</option>
                </select>
                <error-widget field="errors.ScoreType"></error-widget>
              </div>
            </div>
          </div>

          <div class="row" ng-show="subject.ScoreType===1">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <div class="alert alert-info">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                Lookup Score is an alphabet based score depending on the collection of the scores ex: A, B, .. E
              </div>
              <div class="panel panel-default">
                <div class="panel-body">
                  <table class="table table-striped table-hover">
                    <thead>
                      <tr>
                        <th></th>
                        <th>Value</th>
                        <th>Name</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr ng-repeat="score in subject.LookupScores">
                        <td>
                          <a href ng-click="remove($index)"><i class="fa fa-remove"></i></a>
                          <a href ng-click="moveUp($index)" ng-hide="$index === 0"><i class="fa fa-caret-up"></i></a>
                          <a href ng-click="moveDown($index)" ng-hide="$index === (subject.LookupScores.length - 1)"><i class="fa fa-caret-down"></i></a>
                        </td>
                        <td><input type="text" class="form-control" ng-model="score.Value" placeholder="Value"></td>
                        <td><input type="text" class="form-control" ng-model="score.Name" placeholder="Name"></td>
                      </tr>
                    </tbody>
                    <tfoot>
                      <tr>
                        <td colspan="3">
                          <button type="button" class="btn btn-large btn-block btn-default" ng-click="addLookupScore()">Add New Score</button>
                        </td>
                      </tr>
                    </tfoot>
                  </table>
                </div>
              </div>
            </div>
          </div>

          <div class="row" ng-show="subject.ScoreType===0">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <div class="alert alert-info">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                Rangescore is a number based score depending on the maximum & minimum value ex: 67, 84
              </div>
            </div>
          </div>

          <div class="row" ng-show="subject.ScoreType===0" style="margin-left:0px;margin-right:0px;">
            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
              <div class="form-group" ng-class="{ 'has-error': errors.Name}">
                <label class="required" for="Name">Score Name</label>
                <input type="text" class="form-control" ng-model="subject.RangeScore.Name" placeholder="Min Value">
                <error-widget field="errors.Name"></error-widget>
              </div>
            </div>
          </div>

          <div class="row" ng-show="subject.ScoreType===0" style="margin-left:0px;margin-right:0px;">
            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
              <div class="form-group" ng-class="{ 'has-error': errors.LowerBound}">
                <label class="required" for="LowerBound">Lower Bound</label>
                <input type="text" class="form-control" ng-model="subject.RangeScore.LowerBound" placeholder="Min Value">
                <error-widget field="errors.LowerBound"></error-widget>
              </div>
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
            </div>
            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
              <div class="form-group" ng-class="{ 'has-error': errors.Upperbound}">
                <label class="required" for="Upperbound">Upper Bound</label>
                <input type="text" class="form-control" ng-model="subject.RangeScore.Upperbound" placeholder="Max Value">
                <error-widget field="errors.Upperbound"></error-widget>
              </div>
            </div>
          </div>

          <button type="submit" class="btn btn-primary">Submit</button>
          <button type="button" class="btn btn-warning" ng-click="psSubjectNew = !psSubjectNew">Cancel</button>
        </form>
      </div>
    </div>
  </div>
</pageslide>

<!-- UPDATE SUBJECT PANEL -->
<pageslide ps-size="550px" ps-speed="0.25" ps-auto-close="true" ps-open="psSubjectUpdate">
  <div style="padding:20px">
    <h3>Update Subject <a href="" ng-click="psSubjectUpdate = !psSubjectUpdate"><i class="simple-icon-close"></i></a></h3>
    <hr>
    <div class="row ps-content">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <form class="form-horizontal" role="form" ng-submit="updateSubject(subject)">

          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
              <div class="form-group" ng-class="{ 'has-error': errors.IsActive}">
                <label for="IsActive">
                  <input type="checkbox" name="IsActive" id="IsActive" ng-model="subject.IsActive">
                  Active
                </label>
                <error-widget field="errors.IsActive"></error-widget>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
              <div class="form-group" ng-class="{ 'has-error': errors.Name}">
                <label class="required" for="Name">Name</label>
                <input type="text" name="Name" id="Name" class="form-control" ng-model="subject.Name">
                <error-widget field="errors.Name"></error-widget>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4">
              <div class="form-group" ng-class="{ 'has-error': errors.Code}">
                <label class="required" for="Code">Code</label>
                <input type="text" name="Code" id="Code" class="form-control" ng-model="subject.Code" />
                <error-widget field="errors.Code"></error-widget>
              </div>
            </div>
          </div>


          <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
              <div class="form-group" ng-class="{ 'has-error': errors.ScoreType}">
                <label class="required" for="ScoreType">Score Type</label>
                <select class="form-control" ng-options="score.Id as score.Label for score in ScoreTypes" ng-model="subject.ScoreType">
                  <option value="" ng-hide="subject.ScoreType>-1">Choose a score type</option>
                </select>
                <error-widget field="errors.ScoreType"></error-widget>
              </div>
            </div>
          </div>

          <div class="row" ng-show="subject.ScoreType===1">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <div class="panel panel-default">
                <div class="panel-body">
                  <table class="table table-striped table-hover">
                    <thead>
                      <tr>
                        <th></th>
                        <th>Value</th>
                        <th>Name</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr ng-repeat="score in subject.LookupScores">
                        <td>
                          <a href ng-click="remove($index)"><i class="fa fa-remove"></i></a>
                          <a href ng-click="moveUp($index)" ng-hide="$index === 0"><i class="fa fa-caret-up"></i></a>
                          <a href ng-click="moveDown($index)" ng-hide="$index === (subject.LookupScores.length - 1)"><i class="fa fa-caret-down"></i></a>
                        </td>
                        <td><input type="text" class="form-control" ng-model="score.Value" placeholder="Value"></td>
                        <td><input type="text" class="form-control" ng-model="score.Name" placeholder="Name"></td>
                      </tr>
                    </tbody>
                    <tfoot>
                      <tr>
                        <td colspan="3">
                          <button type="button" class="btn btn-large btn-block btn-default" ng-click="addLookupScore()">Add New Score</button>
                        </td>
                      </tr>
                    </tfoot>
                  </table>
                </div>
              </div>
            </div>
          </div>

          <div class="row" ng-show="subject.ScoreType===0">
            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
              <div class="form-group" ng-class="{ 'has-error': errors.Name}">
                <label class="required" for="Name">Score Name</label>
                <input type="text" class="form-control" ng-model="subject.RangeScore.Name" placeholder="Min Value">
                <error-widget field="errors.Name"></error-widget>
              </div>
            </div>
          </div>

          <div class="row" ng-show="subject.ScoreType===0">
            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
              <div class="form-group" ng-class="{ 'has-error': errors.LowerBound}">
                <label class="required" for="LowerBound">Lower Bound</label>
                <input type="text" class="form-control" ng-model="subject.RangeScore.LowerBound" placeholder="Min Value">
                <error-widget field="errors.LowerBound"></error-widget>
              </div>
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
            </div>
            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
              <div class="form-group" ng-class="{ 'has-error': errors.Upperbound}">
                <label class="required" for="Upperbound">Upper Bound</label>
                <input type="text" class="form-control" ng-model="subject.RangeScore.Upperbound" placeholder="Max Value">
                <error-widget field="errors.Upperbound"></error-widget>
              </div>
            </div>
          </div>

          <button type="submit" class="btn btn-primary">Submit</button>
          <button type="button" class="btn btn-warning" ng-click="psSubjectUpdate = !psSubjectUpdate">Cancel</button>
        </form>
      </div>
    </div>
  </div>
</pageslide>

<div class="row row-unstyled">
  <div class="col-md-12">
    <label>SEARCH</label>
  </div>
</div>

<div class="row">
  <div class="col-md-6 col-lg-4">
    <form action="#" class="form-vertical">
      <div class="input-group">
        <input class="form-control" type="text" name="keyword" placeholder="Type Name to search" ng-model="searchText.Name">
        <span class="input-group-addon">Find!</span>
      </div>
    </form>
  </div>
  <div class="col-md-6 col-lg-4">
    <a ui-sref="^.new" class="btn btn-primary">Register a new course</a>
  </div>
</div>

<br>

<div class="row">
  <div class="col-md-12">
    <label>RESULTS</label>
    <div class="search-message">
      Found <span class="primary-color"><b>{{ courses.length | filter:searchText }}</b></span> records
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12">


    <tabset justified="true">
      <tab heading="{{ CourseType.Name }}" ng-repeat="CourseType in coursetypes" select="loadCourses(CourseType.Id)">
        <table class="table table-stripped table-bordered" ng-show="courses.length > 0">
          <thead>
            <tr>
              <th>Code</th>
              <th>Name</th>
              <th>Course Type</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <tr dir-paginate="course in courses | orderBy: 'Name' | itemsPerPage: pagesize" total-items="totalItems">
              <!-- <tr ng-repeat="course in courses | filter:searchText"> -->
              <td>{{ course.Code }}</td>
              <td>{{ course.Name }}</td>
              <td>{{ course.CourseType.Name }}</td>
              <td>
                <a class="" href="" ng-click="deleteCourse(course.Id)"><i class="simple-icon-trash"></i></a>
                <a class="" ui-sref="^.edit({id: course.Id})"><i class="glyphicon glyphicon-edit"></i></a>
                <!-- <a class="" ui-sref="^.installment({id: course.Id})"><i class="simple-icon-notebook"></i></a> -->
                <a href ng-click="loadSubjects(course)">Subjects</a>
              </td>
            </tr>
          </tbody>
        </table>
        <dir-pagination-controls on-page-change="pageChanged(newPageNumber)" template-url="views/templates/dirPagination.tpl.html"></dir-pagination-controls>
      </tab>
    </tabset>
  </div>
</div>